<template>
  <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
                :style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
                <el-form ref="formRef" :model="baTable.form.items"
                    :label-position="config.layout.shrink ? 'top' : 'right'"
                    :label-width="baTable.form.labelWidth + 'px'" v-if="!baTable.form.loading">

                    <el-form-item prop="title" label="套餐名称">
                        <el-input v-model="title" type="string" placeholder="请输入套餐名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="title" label="文件上传">
                        <el-upload v-model="download_url" class="upload-demo" :limit="1"
                        :http-request="uploadFile">
                            <el-button type="primary">上传文件</el-button>
                            <template #tip>
                                <div class="el-upload__tip" v-if="ispercent">
                                    上传进度：{{ total.percent }}%
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                    <el-form-item prop="download_url" label="下载地址">
                        <el-input v-model="download_url" type="string" disabled
                            placeholder="请输入下载地址"></el-input>
                    </el-form-item>
                    <el-form-item prop="price" label="价格">
                        <el-input v-model="price" type="string" placeholder="请输入价格"></el-input>
                    </el-form-item>
                    <FormItem label="产品配置" type="array" v-model="state.array" :input-attr="{
                        keyTitle: 'key',
                        valueTitle: 'value',
                    }" />
                    <FormItem label="显示" v-model="status" type="radio"
                        :data="{ content: { '0': '隐藏', '1': '显示' }, childrenAttr: { border: true } }" />
                </el-form>
            </div>
        </el-scrollbar>
        <div style="text-align: right;">
                <el-button @click="baTable.toggleForm('')">取消</el-button>
                <el-button v-blur @click="addComber"
                    type="primary"> 保存
                   
                </el-button>
            </div>
</template>

<script setup lang="ts">
import { reactive, ref, inject, onMounted,defineEmits } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { FormInstance, genFileId } from 'element-plus'
import { useConfig } from '/@/stores/config'
import { getQiniuToken,saveCombo } from '/@/api/backend/qiniu/index'
import * as qiniu from 'qiniu-js';
const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass
const { t } = useI18n()
const title = ref('')
const download_url = ref('')
const price = ref('')
const status =ref('1')
const state = reactive({
    array: [{key:"渲染类型",value:""},{key:"文件大小",value:""},{key:"SU文件版本",value:""},{key:"上传作者",value:""},{key:"灯光详情",value:""},{key:"授权",value:""}],
})
const qiniuArr = ref<any>([]);



const initQnToken = () => {
    //获取token
    getQiniuToken().then(res => {
        if (res.code == 1) {
            qiniuArr.value = res.data
        }
    })
}


//上传
const uploadFile = (params:any) => {
    initQnToken()
    const {file} = params
    // 获取当前时间戳
    const timestamp = Date.now();
    const originalFilename = file.name;
    const uniqueFilename = `${timestamp}_${originalFilename}`;
    const uptoken = qiniuArr.value.token
    // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
    const subObject = {
        next: next,
        error: error,
        complete: complete
    };
    //上传
    const key = uniqueFilename;
    const config = {
        chunkSize: 4 * 1024 * 1024, // 分块大小  
        useCdnDomain: true,
        region: qiniu.region.z0,
        forceDirect: true // 是否上传全部采用直传方式
    };
    const putExtra: any = {
        fname: originalFilename, //file.raw.name文件原文件名
        mimeType: [] //用来限制上传文件类型，为 null 时表示不对文件类型限制；
    };
    let observable = qiniu.upload(file, key, uptoken, putExtra, config);
    observable.subscribe(subObject);
}
const total = ref<any>([]);
const ispercent = ref(false)
//分片上传返回response，标记上传进度
const next = (response:any) => {
    total.value = response.total;
    ispercent.value = true
};
const error = (err:any) => {
    alert(err.message);
};
const iscomplete = ref(false)
const complete = (res:any) => {
    download_url.value = res.key;
    iscomplete.value = true

};
const emit = defineEmits(['func'])

const addComber = (res:any) => {
    saveCombo({title:title.value,download_url:download_url.value,price:price.value,status:status.value,content:state.array}).then((res)=>{
        if(res.code == 1){
            emit('func',title.value,res.data.id)
            title.value = '';
            download_url.value = '';
            price.value = '';
            status.value = '1';
            state.array = [{key:"渲染类型",value:""},{key:"文件大小",value:""},{key:"SU文件版本",value:""},{key:"上传作者",value:""},{key:"灯光详情",value:""},{key:"授权",value:""}]
            ispercent.value = false
            iscomplete.value = false
            total.value = ref<any>([]);
        }
    });
}

onMounted(() => {
    initQnToken()
})

</script>

<style scoped lang="scss"></style>
